<script setup lang="ts">
  import type { ButtonProps } from 'naive-ui/lib/button';
  import { DownOutlined, UpOutlined } from '@vicons/antd';
  export interface SubmitterProps {
    collapsed: boolean;
    searchConfig?: {
      submitText?: string;
      resetText?: string;
    };
    submitButtonProps?: Partial<ButtonProps>;
    resetButtonProps?: Partial<ButtonProps>;
  }
  withDefaults(defineProps<SubmitterProps>(), {
    collapsed: true,
    searchConfig: () => ({
      submitText: '查询',
      resetText: '重置',
    }),
    submitButtonProps: () => ({}),
    resetButtonProps: () => ({}),
  });

  defineEmits(['update:collapsed', 'onFinish', 'onReset']);
</script>

<template>
  <n-space align="center" justify="end" style="margin-left: 12px">
    <n-button type="primary" v-bind="submitButtonProps" @click="$emit('onFinish')">{{
      searchConfig.submitText ?? '查询'
    }}</n-button>
    <n-button v-bind="resetButtonProps" @click="$emit('onReset')">{{
      searchConfig.resetText ?? '重置'
    }}</n-button>
    <n-button
      type="primary"
      text
      icon-placement="right"
      @click="$emit('update:collapsed', !collapsed)"
    >
      <template #icon>
        <n-icon size="14" class="unfold-icon" v-if="collapsed">
          <DownOutlined />
        </n-icon>
        <n-icon size="14" class="unfold-icon" v-else>
          <UpOutlined />
        </n-icon>
      </template>
      {{ collapsed ? '展开' : '收起' }}
    </n-button>
  </n-space>
</template>

<style scoped></style>
